
    <!-- 留言评论模块 -->
    <template>
    <div ref="tmsgBox" class="tmsgBox">
        <div ref="respondBox" class="tmsg-respond">
            <h3>
                发表评论
                <small v-show="isRespond" class="tcolorm" @click="removeRespond">取消回复</small>
            </h3>
            <form class="">
                <el-input v-model="textarea" type="textarea" :rows="2" placeholder="说点什么呢``" />
                <div :class="pBody ? 'OwO' : 'OwO OwO-open'">
                    <div class="OwO-logo" @click="pBody = !pBody">
                        <span>OwO表情</span>
                    </div>
                    <div class="OwO-body">
                        <ul class="OwO-items OwO-items-show">
                            <li v-for="(oitem, index) in OwOlist" :key="'oitem' + index" class="OwO-item"
                                @click="choseEmoji(oitem.title)">
                                <img :src="require('@/assets/img/emot/image/' + oitem.url)" alt="" />
                            </li>
                        </ul>
                        <div class="OwO-bar">
                            <ul class="OwO-packages">
                                <li class="OwO-package-active">Emoji</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <el-row class="tmsg-r-info">
                    <el-col :span="24" class="info-submit">
                        <!-- <p class="tcolors-bg"
               @click="sendMsg"></p> -->
                        <AButton size="large" @click="sendMsg">{{ sendTip }}</AButton>
                    </el-col>
                </el-row>
            </form>
        </div>
        <div ref="listDom" class="tmsg-comments">
            <a href="#" class="tmsg-comments-tip">活捉 {{ total }} 条</a>
            <div class="tmsg-commentshow">
                <ul class="tmsg-commentlist">
                    <li v-for="(item, index) in list" :key="'common' + index" class="tmsg-c-item">
                        <article class="">
                            <header>
                                <HeadImg :src="item.avatar" />
                                <div class="i-name">
                                    {{ item.username }}
                                </div>
                                <div v-show="item.label" class="i-class">
                                    {{ item.label }}
                                </div>
                                <div class="i-time">
                                    <time>{{ initDate(item.createDate) }}</time>
                                </div>
                            </header>
                            <section>
                                <p v-html="analyzeEmoji(item.content)" />
                                <div v-if="haslogin" class="tmsg-replay" @click="
                                  respondMsg({ leaveIndex: index, pIndex: -1, pid: item.id })
                                ">
                                    回复
                                </div>
                            </section>
                        </article>
                        <ul v-if="item.children && item.children.length > 0" class="tmsg-commentlist"
                            style="padding-left: 60px">
                            <li v-for="(citem, cindex) in item.children" :key="'citem' + cindex" class="tmsg-c-item">
                                <article class="">
                                    <header>
                                        <HeadImg :src="citem.avatar" />
                                        <div class="i-name">
                                            {{ citem.username }} <span>回复</span>
                                            {{ citem.parentUsername }}
                                        </div>
                                        <div v-show="citem.label" class="i-class">
                                            {{ citem.label }}
                                        </div>
                                        <div class="i-time">
                                            <time>{{ initDate(citem.createDate) }}</time>
                                        </div>
                                    </header>
                                    <section>
                                        <p v-html="analyzeEmoji(citem.content)">
                                            {{ citem.content }}
                                        </p>
                                        <div v-show="haslogin" class="tmsg-replay" @click="
                                          respondMsg({
                                            leaveIndex: index,
                                            pIndex: cindex,
                                            pid: citem.id
                                          })
                                        ">
                                            回复
                                        </div>
                                    </section>
                                </article>
                            </li>
                        </ul>
                    </li>
                </ul>
                <!-- <h1 v-show="hasMore"
            class="tcolors-bg"
            @click="addMoreFun">查看更多</h1> -->
                <AButton v-show="hasMore" size="large" @click="addMoreFun">查看更多</AButton>
                <!-- <h1 v-show="!hasMore"
            class="tcolors-bg">没有更多</h1> -->
                <AButton v-show="!hasMore" size="large">没有更多</AButton>
            </div>
        </div>
    </div>
</template>

    <script>
// import {ArticleComment,OtherComment,setArticleComment,setOuthComment} from '../utils/server.js'
import commentAPI from '@/api/comment'
import { OwOlist } from '@/utils/constants'
import { analyzeEmoji } from '@/utils'
import { mapActions, mapState } from 'vuex'
import { initDate } from '@/utils/index.js'
import AButton from '@/components/abutton'
import xss from 'xss'
export default {
    name: 'Message',
    components: {
        // 定义组件
        AButton
    },
    props: ['id'],
    computed: {
        ...mapState('user', ['haslogin'])
    },
    data() {
        // 选项 / 数据
        return {
            respondBox: '', // 评论表单
            listDom: '',
            tmsgBox: '', // 总评论盒子
            isRespond: false,
            textarea: '', // 文本框输入内容
            hasMore: true,
            leaveIndex: 0, // 赞赏等其他模块的分类id
            pIndex: -1,
            pid: '', // 回复评论的一级commentId
            sendTip: '发送~',
            list: [],
            pBody: true,
            OwOlist,
            pageSize: 10,
            current: 1,
            total: 0,
            totalPage: 0
        }
    },
    watch: {
        // 如果路由有变化，会再次执行该方法
        $route: 'routeChange'
    },
    created() {
        // 生命周期函数
    },
    async mounted() {
        // 页面加载完成后
        await this.routeChange()
    },
    methods: {
        // 事件处理器
        initDate,
        ...mapActions('user', ['login']),
        // 选择表情包
        choseEmoji(inner) {
            this.textarea += '[' + inner + ']'
        },
        // 编译表情替换成图片展示出来
        // analyzeEmoji(value) {
        //   const data = analyzeEmoji(value)
        //   console.log(value, data)
        //   return data
        // },
        analyzeEmoji(value) {
            return analyzeEmoji(xss(value))
        },
        // 发送留言
        async sendMsg() {
            if (this.textarea && this.textarea.trim()) {
                const res = await commentAPI.add({
                    content: xss(this.textarea.trim()),
                    articleId: this.id,
                    parentId: this.isRespond ? this.pid : null
                })
                if (res.code === 0) {
                    // this.routeChange()
                    this.textarea = ''
                    this.removeRespond()
                    const timer = setTimeout(() => {
                        this.sendTip = '发送~'
                        clearTimeout(timer)
                    }, 1000)
                    if (this.isRespond) {
                        if (this.pIndex == -1) {
                            this.list[this.leaveIndex].children.unshift(res)
                        } else {
                            this.list[this.leaveIndex].children.push(res)
                        }
                    } else {
                        this.list.unshift(res.data)
                    }
                }
            } else {
                this.sendTip = '内容不能为空~'
                const timer = setTimeout(() => {
                    this.sendTip = '发送~'
                    clearTimeout(timer)
                }, 3000)
            }
        },
        respondMsg({ leaveIndex, pIndex, pid }) {
            // 回复留言
            // console.log(leavePid,pid);
            if (this.haslogin) {
                var dom = event.currentTarget
                dom = dom.parentNode
                this.isRespond = true
                this.leaveIndex = leaveIndex
                this.pIndex = pIndex
                this.pid = pid
                dom.appendChild(this.$refs.respondBox)
            }
        },
        removeRespond() {
            // 取消回复留言
            this.isRespond = false
            this.$refs.tmsgBox.insertBefore(this.$refs.respondBox, this.$refs.listDom)
        },
        async getList(initData) {
            const options = {
                keywords: this.keywords,
                pageSize: this.pageSize,
                currentPage: this.current,
                articleId: this.id,
                state: 1
            }

            const res = await commentAPI.getList(options)
            // console.log('list---data', res.data)
            const { list, pagination } = res.data
            this.list = initData ? list : this.list.concat(list)
            this.total = pagination.countTotal
            this.totalPage = pagination.totalPage
            this.current = pagination.currentPage
            this.hasMore = pagination.totalPage > pagination.currentPage
            this.listLoading = false
        },
        addMoreFun() {
            // 查看更多
            ++this.current
            this.getList(false)
        },
        async routeChange() {
            // 重新加载
            // console.log('重新加载')
            this.current = 1
            await this.getList(true)
        }
    }
}
</script>

    <style lang="less" scoped>
    .tmsgBox {
        position: relative;
        background: #fff;
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 5px;
    }
    
    .tmsg-respond h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 8px;
    }
    
    .tmsg-respond h3 small {
        font-size: smaller;
        cursor: pointer;
    }
    
    .tmsg-respond textarea {
        background: #f4f6f7;
        height: 100px;
        margin-bottom: 10px;
    }
    
    .OwO {
        position: relative;
        z-index: 1;
    }
    
    .OwO .OwO-logo {
        position: relative;
        border-radius: 4px;
        color: #444;
        display: inline-block;
        background: #fff;
        border: 1px solid #ddd;
        font-size: 13px;
        padding: 0 6px;
        cursor: pointer;
        height: 30px;
        box-sizing: border-box;
        z-index: 2;
        line-height: 30px;
    }
    
    .OwO .OwO-logo:hover {
        animation: a 5s infinite ease-in-out;
        -webkit-animation: a 5s infinite ease-in-out;
    }
    
    .OwO .OwO-body {
        position: absolute;
        background: #fff;
        border: 1px solid #ddd;
        z-index: 1;
        top: 29px;
        border-radius: 0 4px 4px 4px;
        display: none;
    }
    
    .OwO-open .OwO-body {
        display: block;
    }
    
    .OwO-open .OwO-logo {
        border-radius: 4px 4px 0 0;
        border-bottom: none;
    }
    
    .OwO-open .OwO-logo:hover {
        animation: none;
        -webkit-animation: none;
    }
    
    .OwO .OwO-items {
        max-height: 197px;
        overflow: scroll;
        font-size: 0;
        padding: 10px;
        z-index: 1;
    }
    
    .OwO .OwO-items .OwO-item {
        background: #f7f7f7;
        padding: 5px 10px;
        border-radius: 5px;
        display: inline-block;
        margin: 0 10px 12px 0;
        transition: 0.3s;
        line-height: 19px;
        font-size: 20px;
        cursor: pointer;
    }
    
    .OwO .OwO-items .OwO-item:hover {
        background: #eee;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
            0 1px 5px 0 rgba(0, 0, 0, 0.12);
        animation: a 5s infinite ease-in-out;
        -webkit-animation: a 5s infinite ease-in-out;
    }
    
    .OwO .OwO-body .OwO-bar {
        width: 100%;
        height: 30px;
        border-top: 1px solid #ddd;
        background: #fff;
        border-radius: 0 0 4px 4px;
        color: #444;
    }
    
    .OwO .OwO-body .OwO-bar .OwO-packages li {
        display: inline-block;
        line-height: 30px;
        font-size: 14px;
        padding: 0 10px;
        cursor: pointer;
        margin-right: 3px;
        text-align: center;
    }
    
    .OwO .OwO-body .OwO-bar .OwO-packages li:first-of-type {
        border-radius: 0 0 0 3px;
    }
    
    @-webkit-keyframes a {
        2% {
            -webkit-transform: translateY(1.5px) rotate(1.5deg);
            transform: translateY(1.5px) rotate(1.5deg);
        }
    
        4% {
            -webkit-transform: translateY(-1.5px) rotate(-0.5deg);
            transform: translateY(-1.5px) rotate(-0.5deg);
        }
    
        6% {
            -webkit-transform: translateY(1.5px) rotate(-1.5deg);
            transform: translateY(1.5px) rotate(-1.5deg);
        }
    
        8% {
            -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
            transform: translateY(-1.5px) rotate(-1.5deg);
        }
    
        10% {
            -webkit-transform: translateY(2.5px) rotate(1.5deg);
            transform: translateY(2.5px) rotate(1.5deg);
        }
    
        12% {
            -webkit-transform: translateY(-0.5px) rotate(1.5deg);
            transform: translateY(-0.5px) rotate(1.5deg);
        }
    
        14% {
            -webkit-transform: translateY(-1.5px) rotate(1.5deg);
            transform: translateY(-1.5px) rotate(1.5deg);
        }
    
        16% {
            -webkit-transform: translateY(-0.5px) rotate(-1.5deg);
            transform: translateY(-0.5px) rotate(-1.5deg);
        }
    
        18% {
            -webkit-transform: translateY(0.5px) rotate(-1.5deg);
            transform: translateY(0.5px) rotate(-1.5deg);
        }
    
        20% {
            -webkit-transform: translateY(-1.5px) rotate(2.5deg);
            transform: translateY(-1.5px) rotate(2.5deg);
        }
    
        22% {
            -webkit-transform: translateY(0.5px) rotate(-1.5deg);
            transform: translateY(0.5px) rotate(-1.5deg);
        }
    
        24% {
            -webkit-transform: translateY(1.5px) rotate(1.5deg);
            transform: translateY(1.5px) rotate(1.5deg);
        }
    
        26% {
            -webkit-transform: translateY(0.5px) rotate(0.5deg);
            transform: translateY(0.5px) rotate(0.5deg);
        }
    
        28% {
            -webkit-transform: translateY(0.5px) rotate(1.5deg);
            transform: translateY(0.5px) rotate(1.5deg);
        }
    
        30% {
            -webkit-transform: translateY(-0.5px) rotate(2.5deg);
            transform: translateY(-0.5px) rotate(2.5deg);
        }
    
        32%,
        34% {
            -webkit-transform: translateY(1.5px) rotate(-0.5deg);
            transform: translateY(1.5px) rotate(-0.5deg);
        }
    
        36% {
            -webkit-transform: translateY(-1.5px) rotate(2.5deg);
            transform: translateY(-1.5px) rotate(2.5deg);
        }
    
        38% {
            -webkit-transform: translateY(1.5px) rotate(-1.5deg);
            transform: translateY(1.5px) rotate(-1.5deg);
        }
    
        40% {
            -webkit-transform: translateY(-0.5px) rotate(2.5deg);
            transform: translateY(-0.5px) rotate(2.5deg);
        }
    
        42% {
            -webkit-transform: translateY(2.5px) rotate(-1.5deg);
            transform: translateY(2.5px) rotate(-1.5deg);
        }
    
        44% {
            -webkit-transform: translateY(1.5px) rotate(0.5deg);
            transform: translateY(1.5px) rotate(0.5deg);
        }
    
        46% {
            -webkit-transform: translateY(-1.5px) rotate(2.5deg);
            transform: translateY(-1.5px) rotate(2.5deg);
        }
    
        48% {
            -webkit-transform: translateY(-0.5px) rotate(0.5deg);
            transform: translateY(-0.5px) rotate(0.5deg);
        }
    
        50% {
            -webkit-transform: translateY(0.5px) rotate(0.5deg);
            transform: translateY(0.5px) rotate(0.5deg);
        }
    
        52% {
            -webkit-transform: translateY(2.5px) rotate(2.5deg);
            transform: translateY(2.5px) rotate(2.5deg);
        }
    
        54% {
            -webkit-transform: translateY(-1.5px) rotate(1.5deg);
            transform: translateY(-1.5px) rotate(1.5deg);
        }
    
        56% {
            -webkit-transform: translateY(2.5px) rotate(2.5deg);
            transform: translateY(2.5px) rotate(2.5deg);
        }
    
        58% {
            -webkit-transform: translateY(0.5px) rotate(2.5deg);
            transform: translateY(0.5px) rotate(2.5deg);
        }
    
        60% {
            -webkit-transform: translateY(2.5px) rotate(2.5deg);
            transform: translateY(2.5px) rotate(2.5deg);
        }
    
        62% {
            -webkit-transform: translateY(-0.5px) rotate(2.5deg);
            transform: translateY(-0.5px) rotate(2.5deg);
        }
    
        64% {
            -webkit-transform: translateY(-0.5px) rotate(1.5deg);
            transform: translateY(-0.5px) rotate(1.5deg);
        }
    
        66% {
            -webkit-transform: translateY(1.5px) rotate(-0.5deg);
            transform: translateY(1.5px) rotate(-0.5deg);
        }
    
        68% {
            -webkit-transform: translateY(-1.5px) rotate(-0.5deg);
            transform: translateY(-1.5px) rotate(-0.5deg);
        }
    
        70% {
            -webkit-transform: translateY(1.5px) rotate(0.5deg);
            transform: translateY(1.5px) rotate(0.5deg);
        }
    
        72% {
            -webkit-transform: translateY(2.5px) rotate(1.5deg);
            transform: translateY(2.5px) rotate(1.5deg);
        }
    
        74% {
            -webkit-transform: translateY(-0.5px) rotate(0.5deg);
            transform: translateY(-0.5px) rotate(0.5deg);
        }
    
        76% {
            -webkit-transform: translateY(-0.5px) rotate(2.5deg);
            transform: translateY(-0.5px) rotate(2.5deg);
        }
    
        78% {
            -webkit-transform: translateY(-0.5px) rotate(1.5deg);
            transform: translateY(-0.5px) rotate(1.5deg);
        }
    
        80% {
            -webkit-transform: translateY(1.5px) rotate(1.5deg);
            transform: translateY(1.5px) rotate(1.5deg);
        }
    
        82% {
            -webkit-transform: translateY(-0.5px) rotate(0.5deg);
            transform: translateY(-0.5px) rotate(0.5deg);
        }
    
        84% {
            -webkit-transform: translateY(1.5px) rotate(2.5deg);
            transform: translateY(1.5px) rotate(2.5deg);
        }
    
        86% {
            -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
            transform: translateY(-1.5px) rotate(-1.5deg);
        }
    
        88% {
            -webkit-transform: translateY(-0.5px) rotate(2.5deg);
            transform: translateY(-0.5px) rotate(2.5deg);
        }
    
        90% {
            -webkit-transform: translateY(2.5px) rotate(-0.5deg);
            transform: translateY(2.5px) rotate(-0.5deg);
        }
    
        92% {
            -webkit-transform: translateY(0.5px) rotate(-0.5deg);
            transform: translateY(0.5px) rotate(-0.5deg);
        }
    
        94% {
            -webkit-transform: translateY(2.5px) rotate(0.5deg);
            transform: translateY(2.5px) rotate(0.5deg);
        }
    
        96% {
            -webkit-transform: translateY(-0.5px) rotate(1.5deg);
            transform: translateY(-0.5px) rotate(1.5deg);
        }
    
        98% {
            -webkit-transform: translateY(-1.5px) rotate(-0.5deg);
            transform: translateY(-1.5px) rotate(-0.5deg);
        }
    
        0%,
        to {
            -webkit-transform: translate(0) rotate(0deg);
            transform: translate(0) rotate(0deg);
        }
    }
    
    @keyframes a {
        2% {
            -webkit-transform: translateY(1.5px) rotate(1.5deg);
            transform: translateY(1.5px) rotate(1.5deg);
        }
    
        4% {
            -webkit-transform: translateY(-1.5px) rotate(-0.5deg);
            transform: translateY(-1.5px) rotate(-0.5deg);
        }
    
        6% {
            -webkit-transform: translateY(1.5px) rotate(-1.5deg);
            transform: translateY(1.5px) rotate(-1.5deg);
        }
    
        8% {
            -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
            transform: translateY(-1.5px) rotate(-1.5deg);
        }
    
        10% {
            -webkit-transform: translateY(2.5px) rotate(1.5deg);
            transform: translateY(2.5px) rotate(1.5deg);
        }
    
        12% {
            -webkit-transform: translateY(-0.5px) rotate(1.5deg);
            transform: translateY(-0.5px) rotate(1.5deg);
        }
    
        14% {
            -webkit-transform: translateY(-1.5px) rotate(1.5deg);
            transform: translateY(-1.5px) rotate(1.5deg);
        }
    
        16% {
            -webkit-transform: translateY(-0.5px) rotate(-1.5deg);
            transform: translateY(-0.5px) rotate(-1.5deg);
        }
    
        18% {
            -webkit-transform: translateY(0.5px) rotate(-1.5deg);
            transform: translateY(0.5px) rotate(-1.5deg);
        }
    
        20% {
            -webkit-transform: translateY(-1.5px) rotate(2.5deg);
            transform: translateY(-1.5px) rotate(2.5deg);
        }
    
        22% {
            -webkit-transform: translateY(0.5px) rotate(-1.5deg);
            transform: translateY(0.5px) rotate(-1.5deg);
        }
    
        24% {
            -webkit-transform: translateY(1.5px) rotate(1.5deg);
            transform: translateY(1.5px) rotate(1.5deg);
        }
    
        26% {
            -webkit-transform: translateY(0.5px) rotate(0.5deg);
            transform: translateY(0.5px) rotate(0.5deg);
        }
    
        28% {
            -webkit-transform: translateY(0.5px) rotate(1.5deg);
            transform: translateY(0.5px) rotate(1.5deg);
        }
    
        30% {
            -webkit-transform: translateY(-0.5px) rotate(2.5deg);
            transform: translateY(-0.5px) rotate(2.5deg);
        }
    
        32%,
        34% {
            -webkit-transform: translateY(1.5px) rotate(-0.5deg);
            transform: translateY(1.5px) rotate(-0.5deg);
        }
    
        36% {
            -webkit-transform: translateY(-1.5px) rotate(2.5deg);
            transform: translateY(-1.5px) rotate(2.5deg);
        }
    
        38% {
            -webkit-transform: translateY(1.5px) rotate(-1.5deg);
            transform: translateY(1.5px) rotate(-1.5deg);
        }
    
        40% {
            -webkit-transform: translateY(-0.5px) rotate(2.5deg);
            transform: translateY(-0.5px) rotate(2.5deg);
        }
    
        42% {
            -webkit-transform: translateY(2.5px) rotate(-1.5deg);
            transform: translateY(2.5px) rotate(-1.5deg);
        }
    
        44% {
            -webkit-transform: translateY(1.5px) rotate(0.5deg);
            transform: translateY(1.5px) rotate(0.5deg);
        }
    
        46% {
            -webkit-transform: translateY(-1.5px) rotate(2.5deg);
            transform: translateY(-1.5px) rotate(2.5deg);
        }
    
        48% {
            -webkit-transform: translateY(-0.5px) rotate(0.5deg);
            transform: translateY(-0.5px) rotate(0.5deg);
        }
    
        50% {
            -webkit-transform: translateY(0.5px) rotate(0.5deg);
            transform: translateY(0.5px) rotate(0.5deg);
        }
    
        52% {
            -webkit-transform: translateY(2.5px) rotate(2.5deg);
            transform: translateY(2.5px) rotate(2.5deg);
        }
    
        54% {
            -webkit-transform: translateY(-1.5px) rotate(1.5deg);
            transform: translateY(-1.5px) rotate(1.5deg);
        }
    
        56% {
            -webkit-transform: translateY(2.5px) rotate(2.5deg);
            transform: translateY(2.5px) rotate(2.5deg);
        }
    
        58% {
            -webkit-transform: translateY(0.5px) rotate(2.5deg);
            transform: translateY(0.5px) rotate(2.5deg);
        }
    
        60% {
            -webkit-transform: translateY(2.5px) rotate(2.5deg);
            transform: translateY(2.5px) rotate(2.5deg);
        }
    
        62% {
            -webkit-transform: translateY(-0.5px) rotate(2.5deg);
            transform: translateY(-0.5px) rotate(2.5deg);
        }
    
        64% {
            -webkit-transform: translateY(-0.5px) rotate(1.5deg);
            transform: translateY(-0.5px) rotate(1.5deg);
        }
    
        66% {
            -webkit-transform: translateY(1.5px) rotate(-0.5deg);
            transform: translateY(1.5px) rotate(-0.5deg);
        }
    
        68% {
            -webkit-transform: translateY(-1.5px) rotate(-0.5deg);
            transform: translateY(-1.5px) rotate(-0.5deg);
        }
    
        70% {
            -webkit-transform: translateY(1.5px) rotate(0.5deg);
            transform: translateY(1.5px) rotate(0.5deg);
        }
    
        72% {
            -webkit-transform: translateY(2.5px) rotate(1.5deg);
            transform: translateY(2.5px) rotate(1.5deg);
        }
    
        74% {
            -webkit-transform: translateY(-0.5px) rotate(0.5deg);
            transform: translateY(-0.5px) rotate(0.5deg);
        }
    
        76% {
            -webkit-transform: translateY(-0.5px) rotate(2.5deg);
            transform: translateY(-0.5px) rotate(2.5deg);
        }
    
        78% {
            -webkit-transform: translateY(-0.5px) rotate(1.5deg);
            transform: translateY(-0.5px) rotate(1.5deg);
        }
    
        80% {
            -webkit-transform: translateY(1.5px) rotate(1.5deg);
            transform: translateY(1.5px) rotate(1.5deg);
        }
    
        82% {
            -webkit-transform: translateY(-0.5px) rotate(0.5deg);
            transform: translateY(-0.5px) rotate(0.5deg);
        }
    
        84% {
            -webkit-transform: translateY(1.5px) rotate(2.5deg);
            transform: translateY(1.5px) rotate(2.5deg);
        }
    
        86% {
            -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
            transform: translateY(-1.5px) rotate(-1.5deg);
        }
    
        88% {
            -webkit-transform: translateY(-0.5px) rotate(2.5deg);
            transform: translateY(-0.5px) rotate(2.5deg);
        }
    
        90% {
            -webkit-transform: translateY(2.5px) rotate(-0.5deg);
            transform: translateY(2.5px) rotate(-0.5deg);
        }
    
        92% {
            -webkit-transform: translateY(0.5px) rotate(-0.5deg);
            transform: translateY(0.5px) rotate(-0.5deg);
        }
    
        94% {
            -webkit-transform: translateY(2.5px) rotate(0.5deg);
            transform: translateY(2.5px) rotate(0.5deg);
        }
    
        96% {
            -webkit-transform: translateY(-0.5px) rotate(1.5deg);
            transform: translateY(-0.5px) rotate(1.5deg);
        }
    
        98% {
            -webkit-transform: translateY(-1.5px) rotate(-0.5deg);
            transform: translateY(-1.5px) rotate(-0.5deg);
        }
    
        0%,
        to {
            -webkit-transform: translate(0) rotate(0deg);
            transform: translate(0) rotate(0deg);
        }
    }
    
    /*用户输入表单*/
    .tmsg-r-info {
        margin: 10px 0;
    }
    
    .tmsg-r-info input {
        height: 30px;
        border-radius: 4px;
        background: #f4f6f7;
    }
    
    .tmsg-r-info .info-submit {
        margin: 10px 0;
        text-align: center;
    }
    
    .tmsg-r-info .info-submit p,
    .tmsg-commentshow h1 {
        /*background: #97dffd;*/
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        /*transition: all .3s ease-in-out;*/
        height: 30px;
        line-height: 30px;
        text-align: center;        }
    
            /*.tmsg-r-info .info-submit p:hover{
        background: #47456d;
    }*/
            /*评论列表*/
            .tmsg-comments .tmsg-comments-tip {
                display: block;
                border-left: 2px solid #363d4c;
                padding: 0 10px;
                margin: 40px 0;
                font-size: 20px;
            }
    
            .tmsg-commentlist {
                margin-bottom: 20px;
            }
    
            .tmsg-commentshow>.tmsg-commentlist {
                border-bottom: 1px solid #e5eaed;
            }
    
            .tmsg-c-item {
                border-top: 1px solid #e5eaed;
            }
    
            .tmsg-c-item article {
                margin: 20px 0;
            }
    
            .tmsg-c-item article header {
                margin-bottom: 10px;
            }
    
            .tmsg-c-item article header img {
                width: 65px;
                height: 65px;
                border-radius: 50%;
                float: left;
                transition: all 0.4s ease-in-out;
                -webkit-transition: all 0.4s ease-in-out;
                margin-right: 15px;
                object-fit: cover;
            }
    
            .tmsg-c-item article header img:hover {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
    
            .tmsg-c-item article header .i-name {
                font-size: 14px;
                margin: 5px 8px 7px 0;
                color: #444;
                font-weight: bold;
                display: inline-block;
            }
    
            .tmsg-c-item article header .i-class {
                display: inline-block;
                margin-left: 10px;
                background: #dff0d8;
                color: #3c763d;
                border-radius: 5px;
                padding: 3px 6px;
                font-size: 12px;
                font-weight: 400;
            }
    
            .tmsg-c-item article header .i-time {
                color: #aaa;
                font-size: 12px;
            }
    
            .tmsg-c-item article section {
                margin-left: 80px;
                word-wrap: break-word;
                word-break: normal;
            }
    
            // .tmsg-c-item article section p img {
            //   vertical-align: middle;
            // }
            .tmsg-c-item article section .tmsg-replay {
                margin: 10px 0;
                font-size: 12px;
                color: #64609e;
                cursor: pointer;
            }
        
    </style>
    <style>
        .tmsg-c-item article section p {
            line-height: 1.3;
        }

        .tmsg-c-item article section p img {
            vertical-align: middle;
        }
    </style>
